<template>
  <div class="route-record">
    <van-nav-bar
      fixed
      left-text="返回"
      left-arrow
      :title="!isWeixin() ? '明细' : ''"
      @click-left="handleBack"
    >
      <!-- <template #right>
                <div class="time">
                    <van-space>
                        2024/01
                        <van-icon color="#999" name="arrow-down" />
                    </van-space>

                </div>
            </template> -->
    </van-nav-bar>

    <div class="inner">
      <div class="top">
        <van-tabs v-model:active="active" @change="handleChangeActive">
          <van-tab title="全部"></van-tab>
          <van-tab title="收入"></van-tab>
          <van-tab title="支出"></van-tab>
        </van-tabs>
      </div>
      <div class="pageLoading" v-if="pageLoading">
        <van-loading type="spinner" vertical>加载中...</van-loading>
      </div>
      <div class="list" v-if="!pageLoading && list.length">
        <div class="list-info">
          <div class="have" v-if="!pageLoading && list.length">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div class="have-item" v-for="(item, index) in list" :key="index">
                <div class="leftcont">
                  <div class="name">{{ item.title }}</div>
                  <div class="time">
                    {{
                      item.addtime
                        ? dayjs.unix(item.addtime).format("YYYY-MM-DD HH:mm:ss")
                        : " - "
                    }}
                  </div>
                </div>
                <div class="price">
                  {{ `${item.state === 2 ? "-" : "+"}${item.price}` }}
                </div>
              </div>
            </van-list>
          </div>
          <div class="none" v-if="!pageLoading && !list.length">
            <van-empty description="暂无记录" />
          </div>
        </div>
      </div>
      <div class="none" v-if="!pageLoading && !list.length">
        <van-empty description="暂无记录" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { isWeixin } from "@/utils/index";
import { useRouter } from "vue-router";
import { userpriceApi } from "@/api/user";
import { getCookie } from "@/utils/cookie";
import dayjs from "dayjs";
const router = useRouter();
const active = ref(0);
const list = ref<Array<any>>([]);
const pageLoading = ref(false);
const finished = ref(false);
const loading = ref(false);
const pagination = reactive({
  pageNo: 1,
  pageSize: 10,
});
const handleBack = () => {
  if (history.state?.back) {
    router.back();
  } else {
    router.push("/user");
  }
};
const getList = async () => {
  pageLoading.value = true;
  let { data } = await userpriceApi({
    uid: getCookie("token") ? Number(getCookie("token")) : "",
    state: active.value,
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
  });
  list.value = data.data || [];
  if (data.totalPage === 1) {
    finished.value = true;
  } else {
    finished.value = false;
  }
  pageLoading.value = false;
};
// const handleShowRuler = () => {

// }
getList();
const handleChangeActive = () => {
  pagination.pageNo = 1;
  getList();
};
const onLoad = async () => {
  pagination.pageNo++;
  let { data } = await userpriceApi({
    uid: getCookie("token") ? Number(getCookie("token")) : "",
    pageNo: pagination.pageNo,
    state: active.value,
    pageSize: pagination.pageSize,
  });
  loading.value = false;
  list.value = [...list.value, ...data.data];
  if (pagination.pageNo >= data.totalPage) {
    finished.value = true;
  }
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
